<template>
  <a-layout-content>
    <addfileurl v-bind="{getCatebag, rules2,getCourse}"></addfileurl>
    <el-table height="100%" :data="getFileurl" border style="width: 100%" max-height="720">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="ID" sortable label="ID"></el-table-column>
      <el-table-column prop="name" label="名称">
        <template slot-scope="scope">
          <a :href="scope.row.file_URL" target="_blank" v-text="scope.row.name" />
        </template>
      </el-table-column>
      <el-table-column prop="course_ID" label="课程">
        <template slot-scope="scope">
          <router-link
            :to="{name: '课程详情', params: {courseId: scope.row.course_ID}}"
            v-text="getname(scope)"
          />
        </template>
      </el-table-column>
      <el-table-column prop="img_URL" label="图片">
        <template slot-scope="scope">
          <img width="154" height="40" :src="scope.row.img_URL" class="banner" />
        </template>
      </el-table-column>
      <el-table-column prop="system" label="操作系统"></el-table-column>
      <el-table-column prop="arch" label="计算机架构"></el-table-column>
      <el-table-column fixed="right" label="操作" width="180">
        <template slot-scope="scope">
          <el-button
            @click="deldata({ID:scope.row.ID})"
            icon="el-icon-delete"
            type="danger"
            title="删除"
            size="small"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
  </a-layout-content>
</template>

<script>
import addfileurl from "./addfileurl.vue";
import { asyncdelFileurl } from "../../../plugins/api.js";
import { mapGetters } from "vuex";
export default {
  name: "fileurl",
  data() {
    return {
      name: "课程文件",
      paths: [],
      rules2: {
        img_URL: [
          { required: true, message: "请选择一个文件", trigger: "blur" }
        ],
        file_URL: [
          { required: true, message: "请选择一个文件", trigger: "blur" }
        ]
      }
    };
  },
  computed: mapGetters(["getCourse", "getFileurl", "getCatebag"]),
  methods: {
    async deldata(data) {
      try {
        await asyncdelFileurl(data);
        this.$store.dispatch("actionFileurl");
        this.$message({
          message: "恭喜你，删除成功",
          type: "success"
        });
      } catch (err) {
        this.$message({
          message: err,
          type: "error"
        });
      }
    },
    getname(scope) {
      let x = this.getCourse.find(v => v.ID === scope.row.course_ID);
      return x && x.name;
    }
  },
  components: {
    addfileurl
  }
};
</script>
